<template>
  <div class="flex">
    <div class="flex-1 p-2 mx-1 bg-white">
      <div class="mb-2 text-center">
        <el-input
            v-model="keyword"
            clearable
            class="inline-input w-50"
            placeholder="请输入检索词"
            style="width: 80%;"
            @keyup.enter="handleSearchClick"
            size="large"
        >
        </el-input>
        <el-button v-loading.fullscreen.lock="loading" class="ml-1" @click="handleSearchClick" size="large"
                   type="primary">搜索
        </el-button>
      </div>
      <div>
        <div v-for="(search, index) in listSearch" :key="index" class="py-1">
          <div class="font-13 cur-p" @click="getImage(search)">
            {{ search.target_txt[1][0] }}
          </div>
        </div>
      </div>
    </div>
    <div class="flex-1">
      <img style="width: 100%"
           @click="$router.push('/sys/file/list?doc_id='+selectDoc.doc_id+'&page_index='+selectDoc.page_index)"
           :src="targetImage"/>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {post, get} from '@/utils/request'
import {getQueryParam} from '@/utils'

const loading = ref(false)
const keyword = ref('')
const targetImage = ref('')
const selectDoc = ref({})
const listSearch = ref([])
const handleSearchClick = () => {
  const param = {}
  param.question = keyword.value
  loading.value = true
  post('/retrieve/', param, 'json').then(r => {
    listSearch.value = r
    loading.value = false
  })
}
const getImage = (r) => {
  selectDoc.value = r
  const param = {}
  param.doc_id = r['doc_id']
  param.page_index = r['page_index']
  param.target_txt = r['target_txt']
  loading.value = true
  post('/retrieve/get_target_page', param, 'json').then(r => {
    console.log(r)
    loading.value = false
    targetImage.value = 'data:image/png;base64,' + r.page_img
  })
}

onMounted(() => {
  keyword.value = getQueryParam('keyword')
})
</script>

<style scoped>

</style>
